<template>
    <el-dialog title="捷宇高拍仪扫描/人像" :visible.sync="doccameraOcxVisible" width="80%" :modal="isShowModal">
        <div>
            <div>
                <img :src="doccameraOcxPriPreviewPhoto" class="doccameraOcxImg">
                <img :src="doccameraOcxSubPreviewPhoto" class="doccameraOcxImg">
            </div>
            <div>
                <!--<el-checkbox @change="setdeskew">纠偏裁边</el-checkbox>
                <el-checkbox @change="discernOcr">OCR</el-checkbox>-->
                <el-button type="primary" @click="changePhoto" class="doccameraOcxButton">转换摄像头</el-button>
            </div>
            <div>
                <el-button type="primary" @click="rotateLeft">左转</el-button>
                <el-button type="primary" @click="rotateRight">右转</el-button>
                <el-button type="primary" @click="scan" v-show="showScan">证件扫描</el-button>
                <el-button type="primary" @click="photo" v-show="showPhoto">人像采集</el-button>
            </div>
            <div>
                <img :src="doccameraOcxPriPhoto" class="doccameraOcxImg">
                <img :src="doccameraOcxSubPhoto" class="doccameraOcxImg">
            </div>
            <div>
                <el-input type="textarea" v-model="ocrResult" class="doccameraOcxTextarea" rows="5" :disabled="true"></el-input>
            </div>
            <el-button type="primary" @click="photoConfirm">确定</el-button>
            <el-button type="primary" @click="photoCancel">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "doccameraOcxPhotoComp",
        data(){
            return {
                doccameraOcxVisible:false,
                doccameraOcxDialog:{},
                doccameraOcxPriPreviewPhoto:"",
                doccameraOcxSubPreviewPhoto:"",
                doccameraOcxPriPhoto:"",
                doccameraOcxSubPhoto:"",
                ocrResult:"",
                currentPhoto:1,
                showScan:true,
                showPhoto:false,
                isShowModal:true
            }
        },
        methods:{
            rotateLeft:function () {
                let param = {"code": "1109"};
                param.rotateDirection = "left";
                this.$emit("doccameraOcxhandle", param);
            },
            rotateRight:function () {
                let param = {"code": "1109"};
                param.rotateDirection = "right";
                this.$emit("doccameraOcxhandle", param);
            },
            scan:function () {
                let param = {"code": "1209"};
                param.currentPhoto = this.currentPhoto;
                this.$emit("doccameraOcxhandle", param);
            },
            photo:function () {
                let param = {"code": "1209"};
                param.currentPhoto = this.currentPhoto;
                this.$emit("doccameraOcxhandle", param);
            },
            /*setdeskew:function () {
                let param = {"code": "1112"};
                this.$emit("doccameraOcxhandle", param);
            },
            discernOcr:function () {
                let param = {"code": "1121"};
                this.$emit("doccameraOcxhandle", param);
            },*/
            changePhoto : function(){
                if(this.currentPhoto == 1){
                    let param = {"code": "1105"};
                    this.$emit("doccameraOcxhandle", param);
                    param = {"code": "1133"};
                    this.$emit("doccameraOcxhandle", param);
                    this.currentPhoto = 2;
                    this.doccameraOcxPriPreviewPhoto = "";
                    this.showScan = false;
                    this.showPhoto = true;
                }else{
                    let param = {"code": "1105"};
                    this.$emit("doccameraOcxhandle", param);
                    param = {"code": "1132"};
                    this.$emit("doccameraOcxhandle", param);
                    this.currentPhoto = 1;
                    this.doccameraOcxSubPreviewPhoto = "";
                    this.showScan = true;
                    this.showPhoto = false;
                }
            },
            photoConfirm:function () {
                if(this.doccameraOcxPriPhoto){
                    let scanReturnData = {"retcode":"0","retinfo":""};
                    let scanData = {};
                    let scanImgArray = [];
                    scanImgArray.push(this.doccameraOcxPriPhoto);
                    for(let i=0;i<scanImgArray.length;i++){
                        scanData.cardImg = this.doccameraOcxPriPhoto;
                        scanData.businessJson = "{\"type\":\"0\",\"name\":\"证件扫描\",\"index\":\"0\"}";
                        scanData.ocrResult = this.parseOcrResult(this.ocrResult);
                        scanData.Content = scanImgArray[i];
                        scanReturnData.data = JSON.stringify(scanData);
                        this.$emit("doccameraOcxPhotoComplete", scanReturnData);
                    }
                }
                if(this.doccameraOcxSubPhoto){
                    let photoReturnData = {"retcode":"0","retinfo":""};
                    let photoData = {};
                    let photoImgArray = [];
                    photoImgArray.push(this.doccameraOcxSubPhoto);
                    for(let j=0;j<photoImgArray.length;j++){
                        photoData.faceImg = this.doccameraOcxSubPhoto;
                        photoData.businessJson = "{\"type\":\"1\",\"name\":\"人像采集\",\"index\":\"1\"}";
                        photoData.ocrResult = this.parseOcrResult(this.ocrResult);
                        photoData.Content = photoImgArray[j];
                        photoReturnData.data = JSON.stringify(photoData);
                        this.$emit("doccameraOcxPhotoComplete", photoReturnData);
                    }
                }
                this.doccameraOcxVisible = false;
            },
            photoCancel:function () {
                this.doccameraOcxVisible = false;
            },
            initdoccameraOcxPhoto : function () {
                let param = {"code": "1132"};
                this.$emit("doccameraOcxhandle", param);
            },
            parseOcrResult: function (data) {
                //let keyList = this.keyList;
                console.info(data);
                let ocrResult = {};
                /*for(let i=0;i<keyList.length;i++){
                    let startIndex = data.indexOf(keyList[i].startKey);
                    if(startIndex != -1) {
                        startIndex = startIndex + keyList[i].startKey.length;
                    }
                    let endIndex = null;
                    if(keyList[i].endKey != null && keyList[i].endKey != ""){
                        endIndex = data.indexOf(keyList[i].endKey);
                    }
                    if(startIndex != -1 && endIndex != -1){
                        let curOcrResult;
                        if(endIndex == null){
                            curOcrResult = data.substring(startIndex);
                        }else{
                            curOcrResult = data.substring(startIndex, endIndex);
                        }
                        if(curOcrResult != null && curOcrResult != ""){
                            ocrResult[keyList[i].name] = curOcrResult;
                        }
                    }
                }*/
                return ocrResult;
            }
        }
    }
</script>

<style scoped>
    .doccameraOcxImg{
        width: 49%;
        height: 480px;
        border: black 1px solid;
        margin: 2px 2px 2px 0px;
    }
    .doccameraOcxTextarea{
        width: 98.3%;
        height: 117px;
        border: black 1px solid;
        margin: 0px 0px 2px 0px;
    }
    .doccameraOcxButton{
        margin: 0px 0px 2px 0px;
    }
</style>